<template>
  <div class="info">
    <el-dialog title="体温曲线"
               :visible.sync="dialogChart.show">
      <h1>体温曲线-{{this.dialogChart.name}}</h1>
      <div class="block">
        <span>时间：</span>
        <el-date-picker v-model="pickerValue"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        format="yyyy-MM-dd"
                        @change="hanldePickerChange">
        </el-date-picker>
      </div>
      <TemperatureChart style="width: 100%;height: 400px;"
                  :chartData="chartData"></TemperatureChart>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogChart.show = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TemperatureChart from './TemperatureChart.vue'
import moment from 'moment'
import axios from '../axios.js'
export default {
  name: 'UserTemperature',
  components: {
    TemperatureChart,
  },
  props: {
    dialogChart: Object,
  },
  data () {
    return {
      chartData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      pickerValue: [
        new Date(
          moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format(
            'YYYY-MM-DD 00:00:00'
          )
        ),
        new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')),
      ],
    }
  },
  watch: {
    dialogChart: {
      handler () {
        console.log(this.dialogChart.show)
        console.log(this.dialogChart.student_id)
        console.log(this.dialogChart.name)
        if (this.dialogChart.show) {
          this.getTemperature()
        }
      },
      deep: true
    },
  },
  methods: {
    getTemperature () {
      axios.getTemperature(this.dialogChart.student_id, this.pickerValue[0].toISOString(), this.pickerValue[1].toISOString()).then((res) => {
        console.log(res)
        this.updateChart(res.data)
      })
    },
    hanldePickerChange (value) {
      console.log(value)
      this.getTemperature()
    },
    updateChart (resData) {
      console.log(resData)
      this.chartData.splice(0, this.chartData.length) // 清空
      if (resData.status == 0) {
        let arrData = resData.data
        for (let i = 0; i < arrData.length; ++i) {
          this.chartData.push([new Date(arrData[i][0]), arrData[i][1]])
        }
      }

      console.log(JSON.stringify(this.chartData))
    },
  },
  created () {
    console.log("created")
    //this.getTemperature()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}
.block {
  margin-top: 20px;
  margin-left: 100px;
}

.label {
  margin-left: 20px;
}
</style>
